<template>
  <div class="correct">
    <courseHeadInfo :courseInfo="courseInfo" />
    <div class="correct-mian">
      <div class="taskForce">
        <el-collapse v-model="activeNames">
          <el-collapse-item
            v-for="(item, index) in courseInfo.content"
            :key="index"
            ref="group"
            :id="'parentCollapse-' + index"
          >
            <div class="retract" @click="retractTasks(index)" />
            <template slot="title">
              <div class="groupAndtaskIconPath">
                <img :src="item.iconPath" />
              </div>
              <div style="display: flex; align-items: flex-start; width: 100%">
                <div class="taskName">
                  {{ item.name }}
                </div>
              </div>
              <div class="icondown2Box">
                <!-- <i class="iconfont iconzhcc_xiangxiajiantou-copy" /> -->
                <img
                  :src="require('@/assets/images/down.png')"
                  class="downIcon"
                />
              </div>
              <el-badge
                :is-dot="true"
                type="warning"
                class="item_badge"
                v-if="findGroupHaveUnapprovedTasks(index)"
              ></el-badge>
            </template>
            <div class="task-content">
              <template>
                <el-collapse v-model="activeNames">
                  <el-collapse-item
                    v-for="(titem, tindex) in item.tasks"
                    :key="tindex"
                    ref="task"
                  >
                    <template slot="title">
                      <div
                        style="
                          display: flex;
                          align-items: flex-start;
                          width: 100%;
                        "
                      >
                        <div class="groupAndtaskIconPath">
                          <img :src="item.iconPath" />
                        </div>
                        <div class="taskName">
                          {{ titem.name }}
                        </div>
                        <!-- 剩余时间 -->
                        <!-- <div
                          class="timeRemaining"
                          v-if="titem.state == chooseType[1]"
                        >
                          <div
                            class="lastTime"
                            :style="{ width: `${'68%'}` }"
                          ></div>
                        </div>
                        <div class="time">剩余: 1小时58分钟</div>
                        <div class="updateTime">修改</div> -->
                      </div>
                      <div
                        class="icondown2Box"
                        :class="{ btnUnShow: !titem.state }"
                      >
                        <!-- <i class="iconfont iconDownxiangxia28" /> -->
                        <img
                          :src="require('@/assets/images/down2.png')"
                          class="downIcon"
                        />
                      </div>
                      <el-badge
                        :is-dot="true"
                        type="warning"
                        class="item_badge"
                        v-if="findTaskHaveUnapprovedTasks(index, tindex)"
                      ></el-badge>
                    </template>
                    <div>
                      <div class="taskDesc">
                        简介：<span v-html="titem.description || '无。'"></span>
                        <br />
                        目标：<span v-html="titem.goal || '无。'"></span>
                      </div>
                      <taskType
                        v-for="(ditem, dindex) in titem.guidelines"
                        :taskIndex="
                          item.groupNoInCourse +
                          '-' +
                          titem.taskNoInGroup +
                          '-' +
                          ditem.noInTask
                        "
                        :ref="
                          'guideline-' + index + '-' + tindex + '-' + dindex
                        "
                        :id="'guideline-' + index + '-' + tindex + '-' + dindex"
                        :taskCommitJson="titem.taskCommitJson"
                        :courseInfo="courseInfo"
                        :courseData="courseData"
                        :titem="ditem"
                        :item="ditem"
                        :key="dindex"
                        :taskGroupID="Number(item.taskGroupID)"
                        :taskID="Number(titem.taskID)"
                        :studenData="studenData"
                        @fetchNewtaskCommitJsonData="fetchNewtaskCommitJsonData"
                      />
                      <!-- :userId="courseData.userID" -->
                    </div>
                  </el-collapse-item>
                </el-collapse>
              </template>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
      <div class="toolNav">
        <!-- <div class="messageAndtask">
          <div class="studentFinishMessage">
            <el-collapse v-model="activeNames">
              <el-collapse-item ref="dynamicMessage">
                <template slot="title">
                  <div class="title" :class="{ badge: true }">动态</div>
                  <div class="icondown2Box">
                    <img
                      :src="require('@/assets/images/down.png')"
                      class="downIcon"
                    />
                  </div>
                </template>
                <div
                  class="closeCollapse"
                  ref="closeCollapse"
                  @click="handelClose"
                />
                <div class="messageList">
                  <div v-if="!news.length" class="tips">暂无新的消息</div>
                  <div
                    class="messageDetail"
                    v-for="(mitem, mindex) in news"
                    :key="mindex"
                  >
                    <div class="picture">
                      <img src="" />
                    </div>
                    <div class="time">{{ mitem.pushTime | filteTime }}钟前</div>
                    <div class="name">王小明 {{ mitem.name }}</div>
                    <div class="cooretTask" @click="handelClick(mitem)">
                      点击批阅
                    </div>
                  </div>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div> -->
        <div class="taskList">
          <div
            class="taskDesc"
            :class="{ 'taskDesc-acitve': changeTasks == taskIndex }"
            v-for="(taskItem, taskIndex) in courseInfo.content"
            :key="taskIndex"
            @click="handelShowChangeTasks(taskIndex)"
          >
            <div class="title">
              {{ taskItem.name }}
            </div>
            <div
              class="changeTaskList"
              @click.stop
              v-if="changeTasks == taskIndex"
            >
              <div
                class="prev"
                @click="prev"
                :class="{ p_n_disabled: step === 0 }"
              >
                <img :src="require('@/assets/images/leftIcon.png')" />
              </div>
              <div class="content">
                <div
                  class="taskGroup"
                  v-for="(item, index) in taskItem.tasks"
                  :key="index"
                  :style="{ left: (-step + index) * 271 + 'px !important' }"
                >
                  <div class="taskName">{{ item.name }}</div>
                  <div class="guideLines">
                    <div
                      class="desc"
                      v-for="(gitem, gindex) in item.guidelines"
                      :key="gindex"
                      @click="
                        handleClickGuideline($event, taskIndex, index, gindex)
                      "
                      v-html="gitem.description"
                    ></div>
                  </div>
                </div>
              </div>
              <div
                class="next"
                @click="next"
                :class="{
                  p_n_disabled:
                    step + 4 == taskItem.tasks.length ||
                    taskItem.tasks.length < 4,
                }"
              >
                <img :src="require('@/assets/images/rightIcon.png')" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import courseHeadInfo from "@/components/teacherPage/courseHeadInfo/courseHeadInfo";
import taskType from "@/views/teacher/correct/taskType/taskType";
import { getCourseDetail, getCurriculumCourse } from "@/request/courses";
import { location } from "@/util/tool";
import {
  handleChangeTaskCommitJsonToArray,
  formatCourseGroupTaskObj,
} from "@/util/courseData";
import {
  getChooseNoData,
  // getCurrNoData,
  getMultistudydata,
} from "@/request/teacher";
import { operType } from "@/util/guidingtextType";
// import { a } from "@/util/testD";
// import { b } from "@/util/testCourseInfo";
export default {
  components: {
    courseHeadInfo,
    taskType,
  },
  data() {
    return {
      operType,
      courseInfo: {},
      courseData: {}, //
      activeNames: [],
      studenData: [],
      taskCommitJson: {},
      changeTasks: null, // 打开任务组选择任务
      // 消息队列
      news: [],
      // mock数据
      task: [],
      sleep: 0,
      step: 0,
      location: location(window),
      oldQuery: {}
    };
  },
  filters: {
    filteTime(val) {
      let currTime = new Date().getTime();
      let time = Math.ceil((currTime - val) / 1000);
      if (time > 60) {
        time = (time % 60) + "分";
      } else {
        time = time + "秒";
      }
      return time;
    },
  },
  computed: {
    // 任务组是否含有为批阅的引导文
    findGroupHaveUnapprovedTasks() {
      return (groupIndex) => {
        let tasks = this.courseInfo.content[groupIndex].tasks;
        return this.findHaveUnapprovedTasks(tasks);
      };
    },
    // 任务是否含有为批阅的引导文
    findTaskHaveUnapprovedTasks() {
      return (groupIndex, taskIndex) => {
        let tasks = [this.courseInfo.content[groupIndex].tasks[taskIndex]];
        return this.findHaveUnapprovedTasks(tasks);
      };
    },
    // 找出所有任务中是否存在未批阅的引导文
    findHaveUnapprovedTasks() {
      return (tasks) => {
        let flag = false;
        tasks.forEach((titem) => {
          if (flag) return;
          titem.guidelines.forEach((gitem) => {
            if (flag) return;
            gitem.studentGuilineList.forEach((sitem) => {
              if (flag || sitem.isComment) return;
              if (gitem.gameOrExciseScore === "游戏") {
                if (
                  (sitem.gameOrExciseScore === -8 &&
                    sitem.taskState === "已学" &&
                    !sitem.guidelineComment) ||
                  sitem.lastUpdatedTime > sitem.commentTime
                ) {
                  flag = true;
                }
              } else {
                if (
                  (sitem.guidelineScore === -8 &&
                    sitem.taskState === "已学" &&
                    !sitem.guidelineComment) ||
                  sitem.lastUpdatedTime > sitem.commentTime
                ) {
                  flag = true;
                }
              }
            });
          });
        });
        return flag;
      };
    },
  },
  watch: {
    "$route"(n, o) {
      if (n.name === "Correct") {
        if (n.query.courseID != this.oldQuery.courseID || n.query.currNo != this.oldQuery.currNo || n.query.chooseNo!= o.query.chooseNo || n.query.Multiple != this.oldQuery.Multiple) {
          this.handelCreate()
        }
      }
    },
    
  },
  async created() {
    // this.$nextTick(() => {
    //   this.$refs["dynamicMessage"].handleHeaderClick();
    // });
    // setTimeout(() => {
    //   this.courseInfo.content.forEach((item) => {
    //     item.tasks.map((titem) => {
    //       this.$set(titem, "taskCommitJson", this.taskCommitJson);
    //     });
    //   });
    // }, 5000);
    this.handelCreate();
    this.oldQuery = this.$route.query
  },
  methods: {
    // 添加标签
    setTagsViewTitle(name) {
      if (this.$route.path === "/") return;
      const title = this.$route.meta.name;
      const courseName = name.name;
      const route = Object.assign({}, this.$route, {
        title: courseName ? courseName : ` ${title}-${this.$route.params.id}`,
      });
      this.$store.dispatch("tagsView/updateVisitedView", route);
    },
    // 生命周期create
    async handelCreate() {
      const courseID = this.$route.query.courseID;
      await this.fetchCoursesDeital({ id: courseID });
      let multiple = this.$route.query.Multiple;
      if (multiple) {
        this.fetchMultistudydata({
          currNo: Number(this.$route.query.currNo),
          userIDArray: JSON.parse(multiple),
        });
      }
      let chooseNo = this.$route.query.chooseNo;
      if (chooseNo) {
        this.fetchChooseNoData({ chooseNo: this.$route.query.chooseNo });
      }
    },
    // 获取课程详情
    async fetchCoursesDeital(params) {
      return new Promise((resolve, reject) => {
        getCourseDetail(params).then((res) => {
          if (res.errno === 0) {
            // res.data = b;
            formatCourseGroupTaskObj(res.data, this);
            this.courseInfo = res.data;
            this.fetchCurrCourseInfo();
            this.courseInfo.content.forEach((item) => {
              item.tasks.forEach((titem) => {
                titem.guidelines.map((gitem) => {
                  this.$set(gitem, "studentGuilineList", []);
                });
              });
            });
            resolve(res);
          }
        });
      });
    },
    // 获取开设课程时的课程信息
    fetchCurrCourseInfo() {
      const currNo = this.$route.query.currNo;
      getCurriculumCourse({ id: currNo }).then((res) => {
        if (res.errno === 0) {
          this.courseInfo.name = res.data.name;
          this.setTagsViewTitle({ name: this.courseInfo.name });
        } else {
          this.$antdMessage.warning({
            content: "获取已开设课程数据失败！",
          });
        }
      });
    },
    // 获取对应chooseNo的学习数据
    fetchChooseNoData(params) {
      getChooseNoData(params).then((res) => {
        if (res.errno === 0) {
          let item = res.data;
          item.taskCommitJson = Object.assign({}, item.taskGroupResults);
          item.taskGroupResults = undefined;
          item.taskCommitJson = handleChangeTaskCommitJsonToArray(
            item.taskCommitJson
          );
          this.handelPushStudyDataInGuidelines(item);
          this.studenData = [item];
        }
      });
    },
    // 获取学生学习数据
    fetchMultistudydata(params) {
      getMultistudydata(params).then((data) => {
        if (data) {
          // data = [data.data[0]]
          // data = a;
          data.forEach((item) => {
            item.taskCommitJson = Object.assign({}, item.taskGroupResults);
            item.taskGroupResults = undefined;
            item.taskCommitJson = handleChangeTaskCommitJsonToArray(
              item.taskCommitJson
            );
            this.handelPushStudyDataInGuidelines(item);
          });
          this.studenData = data;
        }
      });
    },
    // 将学生学习数据插入到引导文中
    handelPushStudyDataInGuidelines(studentStudyData) {
      this.courseInfo.content.forEach((item) => {
        // item.tasks.forEach((titem) => {
        //   titem.guidelines.map((gitem) => {
        //     this.$set(gitem, 'studentGuilineList', [])
        //   })
        // })
        // 找到对应的任务组
        let findGroup = studentStudyData.taskCommitJson.filter(
          (rgitem) => Number(rgitem.taskGroupID) === Number(item.taskGroupID)
        );
        if (findGroup.length) {
          item.tasks.forEach((titem) => {
            // 在对应的任务组中找到对应的任务
            let findTask = findGroup[0].tasks.filter(
              (rtitem) =>
                Number(rtitem.taskID) == Number(titem.taskID) &&
                rtitem.state === "已学"
            );

            if (findTask.length) {
              // 在对应的任务中找到对应的引导文
              titem.guidelines.map((gitem) => {
                let findGuideline = findTask[0].guidelines.filter((rgitem) => {
                  // 过滤出已刷体的引导文 session_id
                  // if (gitem.operType === "刷题") {
                  //   return (
                  //     Number(rgitem.guidelineID) ===
                  //       Number(gitem.guidelineID) && rgitem.session_id
                  //   );
                  // } else {
                  // 找出未批阅 或 已批阅 或 重新学习的引导文
                  return (
                    Number(rgitem.guidelineID) === Number(gitem.guidelineID) &&
                    (rgitem.guidelineScore == -8 ||
                      rgitem.gameOrExciseScore == -8 ||
                      rgitem.guidelineComment ||
                      rgitem.lastUpdatedTime > rgitem.commentTime)
                  );
                });
                // 查阅类型的引导文不用批阅 所以不用添加学生的学习数据进去
                if (findGuideline.length && gitem.operType !== this.operType['refer']) {
                  this.$set(
                    findGuideline[0],
                    "userID",
                    studentStudyData.userID
                  );
                  this.$set(
                    findGuideline[0],
                    "chooseNo",
                    studentStudyData.chooseNo
                  );
                  this.$set(
                    findGuideline[0],
                    "iconPath",
                    studentStudyData.iconPath
                  );
                  this.$set(
                    findGuideline[0],
                    "uName",
                    studentStudyData.realName ||
                      studentStudyData.nickName ||
                      studentStudyData.email ||
                      studentStudyData.regName ||
                      `用户ID${studentStudyData.userID}`
                  );
                  this.$set(findGuideline[0], "taskState", findTask[0].state);
                  gitem.studentGuilineList.push(findGuideline[0]);
                  // 未批阅的排在前面
                  gitem.studentGuilineList.sort((a, b) => {
                    return a.commentTime - b.commentTime;
                  });
                }
              });
            }
          });
        }
      });
    },
    // 收起折叠组件
    retractTasks(index) {
      this.$refs.tasks[index].handleHeaderClick();
    },
    fetchNewtaskCommitJsonData() {},
    // 收起折叠组件
    // handelClose() {
    //   this.$refs["dynamicMessage"].handleHeaderClick();
    // },
    // 显示更换任务的界面
    handelShowChangeTasks(index) {
      if (index === this.changeTasks) return (this.changeTasks = null);
      this.changeTasks = index;
      this.step = 0;
    },
    // 点击外部
    handelClickOutside() {
      this.changeTasks = null;
    },
    // 点击批阅
    handelClick(item) {
      this.handelCreate();
    },
    // 计时器 模拟动态消息
    runTimeout() {
      let time = (Math.floor(Math.random() * (10 - 2)) + 1) * 1000;
      this.sleep = time;
      let num = Math.floor(Math.random() * (this.task.length - 1)) + 1;
      let timer = setTimeout(() => {
        this.news.unshift(this.task[num]);
        this.news[0]["pushTime"] = new Date().getTime();
        this.runTimeout();
        clearTimeout(timer);
      }, this.sleep);
    },
    // 切换任务
    prev() {
      if (this.step === 0) return;
      this.step = this.step - 1;
    },
    // 切换任务
    next() {
      const currGrouopLeng =
        this.courseInfo.content[this.changeTasks].tasks.length;

      if (
        this.step + 4 == currGrouopLeng ||
        this.step + 1 == currGrouopLeng ||
        currGrouopLeng < 4
      )
        return;
      this.step = this.step + 1;
    },
    handleOpenGroup(i, t, g) {
      this.$nextTick(() => {
        if (!this.$refs.group[i].isActive)
          this.$refs.group[i].handleHeaderClick();
        this.handleOpenTask(i, t, g);
      });
    },
    handleOpenTask(i, t, g) {
      this.$nextTick(() => {
        if (!this.$refs.task[t].isActive)
          this.$refs.task[t].handleHeaderClick();
        this.handleOpenGuideline(i, t, g);
      });
    },
    handleOpenGuideline(i, t, g) {
      this.$nextTick(() => {
        this.$refs[`guideline-${i}-${t}-${g}`][0].answerRegion = true;
      });
    },
    // 滚动到锚点
    scrollToView(i, t, g) {
      document.getElementById(`guideline-${i}-${t}-${g}`).scrollIntoView({
        behavior: "smooth",
      });
    },
    handleClickGuideline(e, i, t, g) {
      e.preventDefault();
      this.handleOpenGroup(i, t, g);
      this.$nextTick(() => {
        this.scrollToView(i, t, g);
      });
    },
  },
  mounted() {
    // this.runTimeout();
  },
};
</script>

<style lang="stylus">
.correct {
  .correct-mian {
    padding-top: 9px;
    margin: 0 auto;
    display: flex;
    max-width: 1200px;

    .taskForce {
      flex: 1;
      max-width: 895px;

      .el-collapse {
        border: 0;

        .el-collapse-item {
          padding: 23px 0 25px;
          margin-top: 31px;
          background-color: #ffffff;
          box-shadow: 0px 8px 16px 0px rgba(7, 23, 39, 0.1);
          border-radius: 18px;
          transition: all 0.2s linear;

          .el-collapse-item__header, .el-collapse-item__wrap {
            position: relative;
            border: 0;

            .item_badge {
              position: absolute;
              right: 15px;
              top: -7px;

              .el-badge__content {
                right: 0;
                top: -7px;
                width: 12px;
                height: 12px;
                border: none;
              }
            }

            .groupAndtaskIconPath {
              margin-right: 8px;
              border-radius: 50%;

              img {
                z-index: 99;
                margin: 0;
                -o-object-fit: cover;
                object-fit: cover;
                width: 30px;
                height: 30px;
                border-radius: 50%;
                // transform: translate(-5%, -10%);
              }
            }
          }

          .el-collapse-item__header {
            padding: 4px 31px 6px 26px;
            align-items: center;
            justify-content: space-between;
            height: auto;
            line-height: 1;
            font-size: 16px;
            font-weight: bold;
            color: #000000;
            transition: all 0.1s linear;

            img {
              vertical-align: bottom;
              margin-right: 8px;
              object-fit: cover;
              user-select: none;
              height: 22px;
            }

            .el-collapse-item__arrow {
              margin: 0;
            }

            .el-collapse-item__arrow .el-icon-arrow-right {
              display: none;
            }

            .el-icon-arrow-right:before {
              content: none;
            }

            .icondown2Box {
              margin: 0 0 0 auto;
              transition: transform 0.2s linear;

              .icondown2 {
                font-size: 22px;
                color: #8a8a8a;
              }

              .downIcon {
                margin: 0;
                object-fit: cover;
                height: 100%;
              }
            }

            .tNfinishIcon {
              // width: 19px;
              height: 22px;
            }

            .taskName {
              // padding-top: 5px;
              max-width: 95%;
              font-family: PMingLiU-ExtB;
              font-size: 16px;
              color: #000000;
              text-overflow: ellipsis;
              word-break: break-all;
            }
          }

          .el-collapse-item__wrap {
            // background: #f9f9f9;
            .el-collapse-item__content {
              position: relative;
              padding-bottom: 52px;

              // height 129px
              .retract {
                cursor: pointer;
                position: absolute;
                bottom: 0;
                width: 50px;
                height: 4px;
                left: calc(((100% - 50px) / 2));
                background: #bfbfbf;
              }

              .task-content {
                .el-collapse-item {
                  margin-top: 20px;

                  .el-collapse-item__header {
                    padding-top: 0;
                    min-height: 27px;
                    position: relative;
                    padding-bottom: 17px;

                    // .timeRemaining {
                    // position: relative;
                    // margin-left: 25px;
                    // width: 100px;
                    // height: 13px;
                    // background-color: #eaeaea;
                    // border-radius: 15px;
                    // border: 1px solid #d2d6dc;

                    // // overflow: hidden;
                    // .lastTime {
                    // height: 12px;
                    // background: #5ad551;
                    // border-radius: 15px;
                    // }
                    // }
                    .time {
                      margin-left: 5px;
                      // position: absolute;
                      // top: 0;
                      // right: -105px;
                      font-weight: normal;
                      font-family: PMingLiU-ExtB;
                      font-size: 12px;
                      color: #000000;
                    }

                    .updateTime {
                      margin-left: 21px;
                      line-height: 1;
                      font-family: Yu Gothic UI;
                      font-size: 12px;
                      color: #003262;
                    }

                    .taskName {
                      margin-top: 8px;
                      font-family: PMingLiU-ExtB;
                      font-size: 16px;
                      color: #000000;
                    }
                  }

                  .el-collapse-item__header::after {
                    position: absolute;
                    content: '';
                    left: 0;
                    top: 0;
                    width: 3px;
                    height: 25px;
                    background: #8a8a8a;
                  }

                  .el-collapse-item__wrap {
                    .el-collapse-item__content {
                      padding: 4px 27px 40px;
                      background: #fff;

                      .taskDesc {
                        font-family: Yu Gothic UI;
                        font-size: 13px;
                        color: #666666;
                      }
                    }
                  }
                }

                .el-collapse-item:first-child {
                  margin-top: 0;
                }

                .icondown2Box {
                  transform: rotate(0);
                }

                .is-active {
                  background: #fff;

                  .el-collapse-item__header {
                    .icondown2Box {
                      transform: rotate(180deg);
                    }
                  }

                  .el-collapse-item__content::after {
                    content: none;
                  }
                }

                .isFinishAndLearing {
                  .el-collapse-item__header::after {
                    background: #f6ad35;
                  }
                }

                .el-collapse {
                  .el-collapse-item {
                    .el-collapse-item__header {
                      .icondown2Box {
                        margin: 0;
                      }

                      .btnUnShow {
                        margin: 0 0 0 auto;
                      }
                    }
                  }
                }
              }
            }
          }
        }

        .is-active {
          position: relative;
          background-color: #f9f9f9;

          .el-collapse-item__wrap {
            background: #f9f9f9;
          }

          .el-collapse-item__header {
            padding-bottom: 24px;
          }

          .icondown2Box {
            transform: rotate(180deg);
          }
        }
      }
    }

    .toolNav {
      margin-left: 15px;

      .messageAndtask {
        // position: fixed;
        top: 300px;
        margin-top: 31px;
        width: 291px;

        .studentFinishMessage {
          box-shadow: 0px 3px 6px 0px rgba(82, 82, 82, 0.16);
          border-radius: 10px;

          .el-collapse {
            width: 291px;
            max-height: 207px;
            background-color: #ffffff;
            box-shadow: 0px 3px 6px 0px rgba(82, 82, 82, 0.16);
            border-radius: 10px;
            overflow: hidden;

            .el-collapse-item {
              .el-collapse-item__header {
                padding: 0 23px 0 14px;
                border: none;

                .title {
                  // font-family: Yu Gothic UI;
                  font-size: 16px;
                  color: #003262;
                  font-weight: bold;
                }

                .badge {
                  position: relative;
                }

                .badge::after {
                  position: absolute;
                  content: '';
                  top: 10px;
                  right: -22px;
                  width: 12px;
                  height: 12px;
                  background-color: #f1ae3d;
                  border-radius: 50%;
                }

                .icondown2Box {
                  margin: 0 0 0 auto;
                  transition: all 0.2s linear;

                  img {
                    user-select: none;
                    width: 17px;
                    height: 9px;
                  }
                }

                .el-collapse-item__arrow {
                  display: none;
                }
              }

              .is-active {
                .icondown2Box {
                  transform: rotate(180deg);
                }
              }

              .el-collapse-item__wrap {
                height: 159px;

                // padding-bottom: 29px !important;
                .el-collapse-item__content {
                  position: relative;
                  padding: 0;
                  max-height: 129px;

                  .closeCollapse {
                    cursor: pointer;
                    position: absolute;
                    left: 50%;
                    right: 50%;
                    bottom: -20px;
                    transform: translate(-50%, 0);
                    width: 50px;
                    height: 4px;
                    background: #bfbfbf;
                    border-radius: 5px;
                  }

                  .messageList {
                    height: 129px;
                    max-height: 129px;
                    overflow-y: scroll;
                    padding: 0 6px;

                    .tips {
                      height: 129px;
                      text-align: center;
                    }

                    .messageDetail {
                      cursor: pointer;
                      margin-top: 8px;
                      padding: 0 5px;
                      display: flex;
                      justify-content: space-between;
                      align-items: center;
                      width: 277px;
                      height: 35px;
                      background-color: #f5f5f5;
                      border-radius: 5px;

                      .picture {
                        width: 25px;
                        height: 25px;
                        background-color: #707070;
                        border-radius: 50%;
                        overflow: hidden;

                        img {
                          object-fit: cover;
                          width: 100%;
                        }
                      }

                      .time {
                        margin-left: 5px;
                        width: 53px;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        font-family: Yu Gothic UI;
                        font-size: 12px;
                        color: rgba(0, 50, 98, 0.51);
                      }

                      .name {
                        flex: 1;
                        margin: 0 5px;
                        width: 115px;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        font-family: Yu Gothic UI;
                        font-size: 11px;
                        color: #003262;
                      }

                      .task {
                      }

                      .cooretTask {
                        // width: 56px;
                        font-family: Yu Gothic UI;
                        font-size: 14px;
                        color: #f1ae3d;
                      }
                    }

                    .messageDetail:hover {
                      background: #eaf4ff;
                    }
                  }

                  .messageList::-webkit-scrollbar {
                    width: 3px;
                    height: 1px;
                  }

                  /* 定义滚动条的滑块的样式有圆角和阴影以及自定义的背景色 */
                  .messageList::-webkit-scrollbar-thumb {
                    border-radius: 5px;
                    -webkit-box-shadow: inset 0 0 1px #bababa;
                    background: #dbdbdb;
                  }

                  /* 定义滚动条所在轨道的样式。有圆角和阴影以及淡色系的背景色 */
                  .messageList::-webkit-scrollbar-track {
                    -webkit-box-shadow: inset 0 0 1px #E6FAF3;
                    border-radius: 5px;
                  }
                }
              }
            }
          }
        }
      }

      .taskList {
        // position: fixed;
        // top: 505px;
        margin-left: 10px;
        margin-top: 31px;
        width: 281px;
        background-color: #ffffff;
        box-shadow: 0px 5px 10px 0px rgba(82, 91, 100, 0.16);
        border: solid 1px #eeeeee;
        border-radius: 5px;

        .taskDesc {
          position: relative;

          .title {
            padding-left: 17px;
            position: relative;
            cursor: pointer;
            height: 48px;
            line-height: 48px;
            background-color: #f5f5f5;
            box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
            font-family: Yu Gothic UI;
            font-size: 16px;
            color: #003262;
            font-weight: bold;
          }

          .title::before {
            position: absolute;
            content: '';
            left: 0;
            top: 50%;
            bottom: 50%;
            transform: translate(0, -50%);
            width: 3px;
            height: 23px;
            background: #a3a3a4;
          }

          .title:last-child {
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
          }

          .changeTaskList {
            cursor: default;
            position: absolute;
            display: flex;
            justify-content: space-between;
            right: 0;
            // left: calc(((100vw - 1200px) / 2));
            width: 1195px;
            height: 155px;
            background-color: rgba(114, 114, 114, 0.6);
            border-radius: 10px;
            overflow: hidden;

            .prev, .next {
              display: flex;
              justify-content: center;
              align-items: center;
              width: 58px;
              height: 155px;
              transition: all 0.2s linear;
            }

            .prev:hover, .next:hover {
              background-color: rgba(0, 50, 98, 0.72);
            }

            .p_n_disabled {
              cursor: not-allowed;
            }

            .p_n_disabled:hover {
              background-color: rgba(200, 200, 200, 0.8);
            }

            .content {
              position: relative;
              padding: 0 3px;
              display: flex;
              justify-content: flex-start;
              align-items: center;
              width: 1079px;
              overflow: hidden;

              .taskGroup {
                position: absolute;
                padding: 7px 0 14px 30px;
                margin-right: 12px;
                width: 259px;
                height: 133px;
                overflow: hidden;
                background-color: #fcfbfa;
                border-radius: 10px;

                .taskName {
                  font-weight: bold;
                  max-width: 100%;
                  line-height: 1;
                  text-overflow: ellipsis;
                  overflow: hidden;
                  white-space: nowrap;
                  font-family: Yu Gothic UI;
                  font-size: 16px;
                  color: #333333;
                }

                .guideLines {
                  // max-width: 177px;
                  max-height: 100px;
                  line-height: 1;
                  font-size: 14px;
                  color: #333333;
                  overflow-y: scroll;

                  .desc {
                    margin-top: 12px;
                    width: 90%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    font-family: PMingLiU-ExtB;
                    cursor: pointer;
                    transition: colro 0.2s linear;
                  }

                  .desc:hover {
                    color: #5e7ff1;
                  }
                }

                .guideLines::-webkit-scrollbar {
                  width: 4px;
                  height: 1px;
                }

                /* 定义滚动条的滑块的样式有圆角和阴影以及自定义的背景色 */
                .guideLines::-webkit-scrollbar-thumb {
                  border-radius: 4px;
                  -webkit-box-shadow: inset 0 0 1px #bfc4c3;
                  background: #dbdbdb;
                }

                /* 定义滚动条所在轨道的样式。有圆角和阴影以及淡色系的背景色 */
                .guideLines::-webkit-scrollbar-track {
                  -webkit-box-shadow: inset 0 0 1px #E6FAF3;
                  border-radius: 4px;
                }
              }
            }
          }
        }

        .taskDesc-acitve {
          height: calc(155px + 48px);

          .title {
            background: #fff;
          }

          .title:first-child {
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
          }

          .title::before {
            box-shadow: 0px 5px 10px 0px rgba(82, 91, 100, 0.16);
            background: #f6ad35;
          }
        }
      }
    }
  }
}

@media only screen and (max-width: 767px) {
  .courseTask {
    .taskForce {
      .el-collapse {
        .el-collapse-item {
          .el-collapse-item__wrap {
            .el-collapse-item__content {
              .task-content {
                .el-collapse {
                  .el-collapse-item {
                    .el-collapse-item__header {
                      // .timeRemaining {
                      // display: none;
                      // }
                      .taskController {
                        margin: 0 25px 0 auto;
                      }
                    }
                  }

                  .el-collapse-item__wrap {
                    .el-collapse-item__content {
                      padding: 4px 4px 20px;

                      .taskDesc {
                        padding: 0 16px;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>